<div class="box">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
    <div class="box-category" id="current-conditions">
    	<div id="add-remove-option-value-notice" class='information' style="margin:0px; padding:0px"></div>    	
    	<?php foreach ($options as $option) { ?>
    		  <div style="margin-top:5px; display:none" id="option-name-<?php echo $option['option_id']; ?>">
				  <b><?php echo $option['name']; ?>:</b>
			  </div>
	    	  <div id="option-<?php echo $option['option_id']; ?>" class="option" style='padding-bottom:5px'>
    		  	<div id="container" style="overflow:auto; width:100%;margin:0px;">
				    <div id="current-condition-<?php echo $option['option_id']; ?>">
    		  		</div>
    		  	</div>
    		  </div>
    	<?php } ?>
    	<div>
    		<table width="98%">
    			<tr>
    				<td width="30%">
    					<?php echo $entry_keyword;?>
    				</td>
    				<td>
			 		    <?php if ($filter_name) { ?>
				      		<input size="20" type="text" name="filter_name" value="<?php echo $filter_name; ?>" />
				        <?php } else { ?>
				      		<input size="20" type="text" name="filter_name" value="<?php echo $filter_name; ?>" onclick="this.value = '';" onkeydown="this.style.color = '000000'" style="color: #999;" />
				        <?php } ?>
    				</td>
    			</tr>
    			<tr>
    				<td>
    					<?php echo $entry_district;?>
    				</td>
    				<td>
			 		    <select name="filter_district_id">
	      				</select>
    				</td>
    			</tr>
    			<tr>
    				<td colspan="2" style="padding-top: 5px; text-align: right">
    					<label for="filter_description"><?php echo $entry_description;?></label>
    					<?php if($filter_description) {?>
    						<input value="1" type="checkbox" id="filter_description" name="filter_description" checked="checked"/>
    					<?php }else{?>
    						<input value="1" type="checkbox" id="filter_description" name="filter_description"/>
    					<?php }?>
    				</td>
    			</tr>
    		</table>
		    
		    <div style="margin:10px; text-align:right">
		 		<a id="button-search-detail" class="button"><span><?php echo $button_search; ?></span></a>
		 	</div>
		  
			<div style="text-align:justify; margin-bottom:5px;">
				<?php echo $text_tip;?>
			</div>
    	</div>
    </div>
  <h3><?php echo $heading_title_2; ?></h3>
    <div class="box-category">
		  <?php foreach ($options as $option) { ?>
		  	  <div style="margin-top:5px">
				  <b><?php echo $option['name']; ?>:</b>
			  </div>
	    	  <div>
		    	  <?php if ($option['type'] == 'image') { ?>
			    	  <div id="search-option-<?php echo $option['option_id']; ?>" class="option">
		    		  	<div id="container" style="overflow:auto; width:100%;margin:0px;">
			    		  	<div id="available-condition-<?php echo $option['option_id']; ?>">
			    				<?php foreach ($option['option_value'] as $option_value) { ?>
			    					<div  id="option-value-<?php echo $option_value['option_value_id']; ?>" style="margin:2px; float:left;width:<?php echo $this->config->get('config_image_restaurant_option_width') + 16;?>px;height:35px;">
			    						<label for="option-value-[<?php echo $option_value['option_value_id'];?>]">
			    							<input type="hidden" name="option_value_id[]" value="<?php echo $option_value['option_value_id'];?>"/>
		    								<img title="<?php echo $option_value['name']; ?>" style="vertical-align:middle" src="<?php echo $option_value['image']; ?>"/>
			    						</label>
			    						<br/>
			    					</div>
			    					<script type="text/javascript"><!--
			    					$('#option-value-<?php echo $option_value['option_value_id']; ?> img').click(function() {
				    					var parentId = $('#option-value-<?php echo $option_value['option_value_id']; ?>').parent().attr('id');

				    					if(parentId == 'available-condition-<?php echo $option['option_id']; ?>'){
											// Show option name
											$('#option-name-<?php echo $option['option_id']; ?>').show();
					    					
				    						$('#current-condition-<?php echo $option['option_id']; ?>').append($('#option-value-<?php echo $option_value['option_value_id']; ?>'));
				    						// $('#add-remove-option-value-notice').html("<?php echo sprintf($text_added, $option_value['name']); ?>.");
				    					} else {
				    						$('#available-condition-<?php echo $option['option_id']; ?>').append($('#option-value-<?php echo $option_value['option_value_id']; ?>'));
				    						// $('#add-remove-option-value-notice').html("<?php echo sprintf($text_removed, $option_value['name']); ?>.");

											if($('#current-condition-<?php echo $option['option_id']; ?>').children().length == 0){
												// Hide option name when it contains no child
												$('#option-name-<?php echo $option['option_id']; ?>').hide();
											}
				    					}
			    					});

			    					<?php 
			    					if(in_array($option_value['option_value_id'], $filter_option_value_ids)){
			    					?>
				    					// Show option name
										$('#option-name-<?php echo $option['option_id']; ?>').show();
										
			    						$('#current-condition-<?php echo $option['option_id']; ?>').append($('#option-value-<?php echo $option_value['option_value_id']; ?>'));
			    					<?php 
			    					}
			    					?>
			    					//-->
			    					</script>
			    				<?php } ?>
			    			</div>
		    			</div>
		    		  </div>
		    	  <?php } ?>
		    	  <script type="text/javascript"><!--
		    	  	$('#search-option-<?php echo $option['option_id']; ?> img').tooltip({
		    			track: true,
		    			delay: 0,
		    			showURL: false,
		    			showBody: " - ",
		    			fade: 1
		    		});
		    		//-->
		    	  </script>
	    	  </div>
	      <?php } ?>    
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('select[name=\'filter_district_id\']').load('index.php?route=account/register/district&city_id=<?php echo $this->city->getCityId(); ?>&district_id=<?php echo $filter_district_id; ?>');
//--></script> 
